<template>
  <div class="all-rel">
    <div class="all-flex-center-between all-top-handle">
      <el-button size="small" @click="clearFilter">重置所有筛选</el-button>
    </div>
    <div class="all-flow-table-box">
      <el-table ref="myTable" :data="list" border stripe>
        <el-table-column sortable align="center" prop="userID" label="用户id" width="100"></el-table-column>
        <el-table-column align="center" prop="nickname" label="昵称" width="180"></el-table-column>
        <el-table-column align="center" prop="sex" label="性别" width="80"
          :filters="[{text: '男', value: '男'}, {text: '女', value: '女'}]"
          :filter-method="filterHandler"
        ></el-table-column>
        <el-table-column align="center" prop="mobile" label="手机号" width="180"></el-table-column>
        <el-table-column align="center" prop="user_program.VIP" label="会员级别" width="100"
          :filters="[{text: '普通用户', value: '普通用户'}, {text: '会员', value: '会员'}]"
          :filter-method="filterHandler"
        ></el-table-column>
        <el-table-column sortable align="center" prop="user_program.earnings" label="收益" width="100"></el-table-column>
        <el-table-column sortable align="center" prop="user_program.money" label="余额" width="100"></el-table-column>
        <el-table-column sortable align="center" prop="user_program.noMoney" label="冻结金额" width="120"></el-table-column>
        <el-table-column sortable align="center" prop="user_program.yesMoney" label="可用金额" width="120"></el-table-column>
        <el-table-column sortable align="center" prop="addTime" label="入驻时间" width="180"></el-table-column>
        <el-table-column></el-table-column>
        <el-table-column align="center" label="操作" width="80">
          <template slot-scope="scope">
            <el-button size="mini" @click="$router.push('/member/detail?id=' + list[scope.$index].userID)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="all-pagination">
      <el-pagination background layout="prev, pager, next" :page-size="size" :total="count" @current-change="currentPage"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      size: 15,
      list: []
    };
  },
  methods: {
    clearFilter() {
      this.$refs.myTable.clearFilter();
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      const keys = property.split(".");
      if (keys.length === 2) {
        return row[keys[0]][keys[1]] === value;
      } else {
        return row[property] === value;
      }
    },
    getList(page, size) {
      let _this = this;
      this.$ajax({
        url:'user/getlist',
        data:{
          app:{
            page: page,
            size: size === undefined ? this.size : size,
          }
        },
        perfect(con) {
          _this.list = con.list;
          _this.count = con.count;
        },
        success(res) {
          if (res.data.code !== 1) {
            _this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }
      });
    },
    currentPage(page) {
      this.getList(page);
    }
  },
  created(){
    this.getList(1);
  }
};
</script>
